import React, { Component } from "react";
import { Tooltip } from 'antd';

import css from "./panel.css.js";
import Style from 'style-it';

class OperatorPanel extends Component {
	constructor(props) {
		super(props);
		this.state = {
			show: false,
			lock: false,
			onLockFun: this.props.onLockFun,
			onShapeFun: this.props.onShapeFun,
			onCopyFun: this.props.onCopyFun,
			onCropFun: this.props.onCropFun,
			onMattingFun: this.props.onMattingFun,
			onReversalFun: this.props.onReversalFun,
			onFilterFun: this.props.onFilterFun,
			onUpLayerFun: this.props.onUpLayerFun,
			onDownLayerFun: this.props.onDownLayerFun,
			onTopLayerFun: this.props.onTopLayerFun,
			onBottomLayerFun: this.props.onBottomLayerFun,
			onDeleteFun: this.props.onDeleteFun,
			isOption: false,
			isCropping:this.props.isCropping,
			onTranformSaveFun:this.props.onTranformSaveFun,
			onCancelFun:this.props.onCancelFun,

		}
	}

	componentWillReceiveProps(nextProps) {
		this.setState({ lock: nextProps.lock, isOption: nextProps.isOption,isCropping:nextProps.isCropping });
	}

	show = (e) => {
		this.setState({ show: !this.state.show });
	}


	render() {
		let opt = !this.state.isOption && !this.state.isCropping ?
			<ul >
				<Tooltip placement="topLeft" title='锁'>
					<li className={!this.state.lock ? "li_unlock" : "li_lock"} key='li_lock' style={{ display: this.state.onLockFun ? 'block' : 'none' }} onClick={this.state.onLockFun}></li>
				</Tooltip>
				<Tooltip placement="topLeft" title='变形'>
					<li className="li_shape" key='li_shape' style={{ display: this.state.onShapeFun ? 'block' : 'none' }} onClick={this.state.onShapeFun}></li>
				</Tooltip>
				<Tooltip placement="topLeft" title='抠图'>
					<li className="li_matting" key='li_matting' style={{ display: this.state.onMattingFun ? 'block' : 'none' }} onClick={this.state.onMattingFun}></li>
				</Tooltip><Tooltip placement="topLeft" title='滤镜'>
					<li className="li_filter" key='li_filter' style={{ display: this.state.onFilterFun ? 'block' : 'none' }} onClick={this.state.onFilterFun}></li>
				</Tooltip>
				<Tooltip placement="topLeft" title='裁剪'>
					<li className="li_crop" key='li_crop' style={{ display: this.state.onCropFun ? 'block' : 'none' }} onClick={this.state.onCropFun}></li>
				</Tooltip>
				<Tooltip placement="topLeft" title='反转'>
					<li className="li_reversal" key='li_reversal' style={{ display: this.state.onReversalFun ? 'block' : 'none' }} onClick={this.state.onReversalFun}></li></Tooltip>
				<Tooltip placement="topLeft" title='复制'>
					<li className="li_copy" key='li_copy' style={{ display: this.state.onCopyFun ? 'block' : 'none' }} onClick={this.state.onCopyFun}></li>
				</Tooltip>
				<li className="li_layer" key='li_layer' onClick={() => this.show()}  >
					<div className="li_l_box" style={{ display: this.state.show ? 'block' : 'none' }} key="li_l_box">
						<ul >
							<Tooltip placement="topLeft" title='上移一层'><li className="li_l_box_a" style={{ display: this.state.onUpLayerFun ? 'block' : 'none' }} onClick={(e) => { e.stopPropagation(); this.state.onUpLayerFun() }}></li></Tooltip>
							<Tooltip placement="topLeft" title='下移一层'><li className="li_l_box_b" style={{ display: this.state.onDownLayerFun ? 'block' : 'none' }} onClick={(e) => { e.stopPropagation(); this.state.onDownLayerFun() }}></li></Tooltip>
							<Tooltip placement="topLeft" title='移至顶层'><li className="li_l_box_c" style={{ display: this.state.onTopLayerFun ? 'block' : 'none' }} onClick={(e) => { e.stopPropagation(); this.state.onTopLayerFun() }}></li></Tooltip>
							<Tooltip placement="topLeft" title='移至底层'><li className="li_l_box_d" style={{ display: this.state.onBottomLayerFun ? 'block' : 'none' }} onClick={(e) => { e.stopPropagation(); this.state.onBottomLayerFun() }}></li></Tooltip>
						</ul>
					</div>
				</li>
				<Tooltip placement="topLeft" title='删除'>
					<li className="remove" key='reomove' style={{ display: this.state.onDeleteFun ? 'block' : 'none' }} onClick={this.state.onDeleteFun}></li>
				</Tooltip>
			</ul>
			:
			<div className="outBox">
				<span className="itemClose">
					<span onClick={() => this.state.onCancelFun && this.state.onCancelFun()}></span>
				</span>
				<span className="itemOk">
					<span onClick={() => this.state.onTranformSaveFun && this.state.onTranformSaveFun()}></span>
				</span>
			</div>;
		return Style.it(css,
			<div className="box">
				{opt}
			</div>
		)
	}
}

export default OperatorPanel;